<template>
  <div>
    <el-dialog
      title="活跃班级排行榜"
      :visible.sync="isShow"
      width="800px"
      destroy-on-close
      @close="close"
    >
      <div>
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          label-width="68px"
          class="form-search"
        >
          <el-form-item label="行政班" prop="name">
            <el-select v-model="queryParams.classId" placeholder="请选择" clearable class="input-width">
              <el-option
                v-for="(item, index) in classes"
                :key="index"
                :label="item.className"
                :value="item.classId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="专业名称" prop="name">
            <el-select v-model="queryParams.majorId" placeholder="请选择" clearable class="input-width">
              <el-option
                v-for="(item, index) in majors"
                :key="index"
                :label="item.majorName"
                :value="item.majorId"
              />
            </el-select>
          </el-form-item>

          <el-form-item class="search-button">
            <el-button
              v-preventReClick
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
            >
              搜索
            </el-button>
            <el-button
              v-preventReClick
              icon="el-icon-refresh"
              size="mini"
              @click="resetQuery"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
        <el-table
          v-loading="loading"
          :data="postList"
          style="width: 100%"
          :row-style="{height: '0'}"
          :cell-style="{padding: '6px'}"
          :header-row-style="{height: '0'}"
          :header-cell-style="{height: '0'}"
          size="mini"
        >
          <el-table-column label="排名" align="center" prop="sort"/>
          <el-table-column label="行政班" align="center" prop="className" show-overflow-tooltip/>
          <el-table-column label="专业名称" align="center" prop="majorName" show-overflow-tooltip/>
          <el-table-column label="班级活跃人数" align="center" prop="activeStudentCount"
          />
          <el-table-column label="班级人数" align="center" prop="totalStudentCount"/>
          <el-table-column label="活跃度" align="center" prop="classActive"/>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="handleQuery"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getactiveClassSort } from '@/api/homePage'
import { listPost_class, listPost_major } from '@/api/schoolOrganization/organization'

export default {
  components: {},
  name: 'activecoursedetail',
  data() {
    return {
      isShow: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        startDate: '',
        endDate: '',
        classId: '',
        majorId: '',
        branchId: ''
      },
      loading: false,
      postList: [],
      total: 20,
      majors: [],
      classes: []
    }
  },
  mounted() {

  },
  methods: {
    resetQuery() {
      // 把queryParams清空
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        startDate: this.queryParams.startDate,
        endDate: this.queryParams.endDate,
        courseName: '',
        teacherName: '',
        branchId: this.queryParams.branchId
      }
      this.handleQuery()
    },
    // 请求数据函数
    handleQuery() {
      this.loading = true
      getactiveClassSort(this.queryParams).then(res => {
        let { code, rows, total } = res
        if (code == 200) {
          this.total = total
          this.postList = rows
        }

      }).finally(() => {
        this.loading = false
      })
      //请求数据
      // 请求之后不管成功还是失败都要把loading改为false
    },
    show(startDate, endDate, branchId) {
      this.isShow = true
      this.queryParams.endDate = endDate
      this.queryParams.startDate = startDate
      this.queryParams.branchId = branchId
      this.getMajorList()
      this.getClassList()
      this.handleQuery()
    },
// 获取专业
    getMajorList() {
      listPost_major({ branchId: this.queryParams.branchId }).then(res => {
        if (res.code == 200) {
          this.majors = res.rows
        }
        console.log(res, 'sddsdsdsd')
      })
    },
    // 获取班级
    getClassList() {
      let params = {
        branchId: this.queryParams.branchId,
        pageNum: 1,
        pageSize: 9999
      }
      listPost_class(params).then(res => {
        if (res.code == 200) {
          this.classes = res.rows
        }
      })
    },
    // changeSelect(visible) {
    //   if (visible) {
    //     this.getMajorList();
    //     this.getClassList()
    //   }
    // },
    // 关闭
    close() {
      this.isShow = false
      this.userType = ''
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        startDate: '',
        endDate: '',
        courseName: '',
        teacherName: '',
        branchId: ''
      }
      this.loading = false
      this.postList = []
      this.total = 20
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-form-item--small.el-form-item:not(:first-child) {
  margin-left: 20px;
}

.input-width {
  width: 150px;
}

.form-search {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.search-button {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

:deep(.pagination-container) {
  padding: 0 !important;
  margin-bottom: 0 !important;
}
</style>
